
<template>
    <view>
        <a-row>
            <a-input-search v-model:value="searchKey" placeholder="请输入数据信息" style="width: 200px; margin-bottom: 10px;"
                @search="onSearch()" />
        </a-row>
        <a-table :rowKey="(record) => record.id" :row-selection="rowSelection" :dataSource="dataSource" size="small"
            :columns="columns" bordered :pagination="false">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'sex'">
                    <a-tag color="green">{{ text }}</a-tag>
                </template>
            </template>
        </a-table>
        <AntdZh>
            <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                @change="getList" />
        </AntdZh>
    </view>
</template>
<script setup>
import { queryList } from '@/custom/organization/api/users';
const dataSource = ref([]);
const total = ref(1)
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });
const emit = defineEmits(["staffSelection",]);
// 定义表格列配置
const columns = [
    {
        title: '姓名',
        dataIndex: 'nickName',
        key: 'nickName',
    },
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
    },
    {
        title: '部门ID',
        dataIndex: 'deptId',
        key: 'deptId',
    },
];


const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        emit("staffSelection", selectedRows)
    },
    getCheckboxProps: record => ({
        id: record.id,
    }),
};

/** 搜索按钮操作 */
function onSearch() {

}

/** 提交按钮 */
function submitItem() {

}
function getList() {
    queryList(query.value).then(res => {
        console.log(res)
        dataSource.value = res.content
        total.value = res.totalElements;
    })
}
getList()
</script>
  